<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/views/include/nocachehead.jsp"%>
<title>浏览照片 - <c:out value="${requestScope.photo.albumName }" /></title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/pagination.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/comment.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/ad-gallery/jquery.ad-gallery.pack.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/gallery.css" >
<style type="text/css">
  #gallery {
    padding: 30px;
    background: #e1eef5;
  }
</style>
</head>
<body>
	<%@ include file="/views/include/statusbar.jsp"%>
	<div>
		<!-- main content start -->
		<div>
			<div id="gallery" class="ad-gallery">
		      <div class="ad-image-wrapper"></div>
		      <div class="ad-controls"></div>
		      <div class="ad-nav">
		        <div class="ad-thumbs">
		          <ul class="ad-thumb-list">
		          	<c:forEach items="${requestScope.photos}" var="photoFile" varStatus="status">
		          	<li>
		              <a href="${pageContext.request.contextPath}/image/<c:out value="${photoFile.middleFile}" />.${photoFile.ext}">
		                <img src="${pageContext.request.contextPath}/image/<c:out value="${photoFile.smallFile}" />.${photoFile.ext}" class="image${status.index}">
		              </a>
		            </li>
					</c:forEach>
		          </ul>
		        </div>
		      </div>
		    </div>
		    <div id="descriptions">
				<div class="displayingPhotoDesc">
					<p id="description">
						<c:out value="${requestScope.photo.description}" />
					</p>
				</div>
		    </div>
		</div>
		<!-- main content end -->
		<script type="text/javascript">
		var currentPhotoId = null;
		(function($){
			$(document).ready(function(){
				photos = [];
				<c:forEach items="${requestScope.photos}" var="photoFile" varStatus="status">
				photos.push({id:'${photoFile.id}'});
				</c:forEach>
				
				var galleries = $('.ad-gallery').adGallery({ 
					loader_image: '${pageContext.request.contextPath}/plugin/ad-gallery/loader.gif',
				    start_at_index: 0,
				    width: false,
				    height: false,
				    slideshow: {enable: false},
				    effect: 'fade',
				    enable_keyboard_move: true,
				    cycle: true,
				    callbacks: {afterImageVisible: loadPhotoInfo}
				});
			});
		})(jQuery);

		function loadPhotoInfo() {
			var photoId = photos[this.current_index].id;
			if(photoId == currentPhotoId) return;
			else currentPhotoId = photoId;
			var postUrl='${pageContext.request.contextPath}/album/viewphoto/'+photoId+'.html';
			doAjax(postUrl,null,function(data){
				if(data.success) {
					var photoInfo = data.photo;
					initPhotoInfo(photoInfo);
				} else {
					if(data.errmsg) alert(data.errmsg);
				}
			},function(){
				alert('系统发生异常，请稍候再试...');
			});
			
			function initPhotoInfo(photoInfo) {
				location.hash=photoInfo.id;
				var desc = photoInfo.description;
				if(desc) {
					jQuery('#description').html(desc.clean());
				}
				<%--加载评论
				$("#commentWrapper").html();
				var script = AjaxComment.generateAllscript("comment"+photoInfo.id,photoInfo.id, "", "PHOTO", photoInfo.ownerId);
				$("#commentWrapper").html(AjaxComment.generateAllHTML("comment" + photoInfo.id, photoInfo.id,	"", "PHOTO", photoInfo.ownerId));
				alert(AjaxComment.generateAllscript("feed"+resourceId,resourceId,resourceName,type,ownerId));
				eval(script);--%>
			}
		}
		</script>
		<div id="commentWrapper">
		</div>
	</div> 
</body>
</html>